<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for绑定key</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item in letters">{{item}}</li>
        </ul>
        <button @click="btnClick()">按钮</button>
    </div>
</body>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                letters: [
                    'A',
                    'B',
                    'C',
                    'D',
                    'E',
                ],
            },
            methods: {
                btnClick (){
                    //1.通过push方法
                    //this.letters.push('追加');

                    //2.pop方法删除最后一个元素
                    //this.letters.pop();

                    //3. shift() 删除数组中的第一个元素
                    //this.letters.shift();

                    //4. unshift()在数组最前面添加元素
                    //this.letters.unshift('AA');

                    //5.splice () 在指定位置删除/插入/替换元素
                    //第一个参数传入位置，第二个位置传入删除元素个数
                    //this.letters.splice(2,2);

                    //6.sort 排序
                    //this.letters.sort();

                    //7.reverse 逆序
                    //this.letters.reverse();

                    //修改的对象、索引值，修改后的值
                    Vue.set(this.letters,0,'AA')

                    //.通过索引值修改
                    //this.letters[0] = 'AA'
                }
            }
        })
    </script>
</html>